import React, { Component } from 'react'
import PropTypes from 'prop-types'
import './navigator.css'
import { menu, content } from './data'

/**
 * 天猫首页导航菜单
 */
class TMNavigator extends Component {

    static propTypes = {
        //一级菜单
        menu:PropTypes.arrayOf(PropTypes.shape({
            name:PropTypes.string,
            link:PropTypes.string
        })),
        //二级菜单，品牌，广告
        content:PropTypes.arrayOf(PropTypes.shape({
            menu:PropTypes.arrayOf(PropTypes.shape({
                second:PropTypes.objectOf(PropTypes.shape({
                    name:PropTypes.string,
                    link:PropTypes.string
                })),
                three:PropTypes.arrayOf(PropTypes.shape({
                    name:PropTypes.string,
                    link:PropTypes.string
                }))
            })),
            brand:PropTypes.arrayOf(PropTypes.shape({
                img: PropTypes.string,
                link: PropTypes.string
            })),
            adv:PropTypes.arrayOf(PropTypes.shape({
                img: PropTypes.string,
                link: PropTypes.string
            }))
        }))
    }

    state = {
        active:-1
    }

    selectMenu=(index)=>{
        this.setState({active: index})
    }

    render() {
        return (
            <div className="navigator" onMouseLeave={()=>this.selectMenu(-1)}>
                <ul className="firstMenuUl">
                    {this.props.menu.map((val,k)=>(
                        <li key={k} className={this.state.active==k?'firstMenuLi select':'firstMenuLi'} onMouseEnter={()=>this.selectMenu(k)}>
                            <p className="firstMenuTitle"><a href={val.link}>{val.name}</a></p>
                        </li>
                    ))}
                </ul>
                {this.props.content.map((contentval, k)=>(
                     <div className="content" key={k} style={{display:this.state.active==k?'flex':'none'}}>
                        <ul className="menuContent">
                            {contentval.menu.map((menuval, menuk)=>(
                                <li>
                                    <p className="secondMenu"><a href={menuval.second.link}>{menuval.second.name}</a></p>
                                    <div className="threeMenu">
                                        {menuval.three.map((threeval, threek)=>(
                                            <span key={threek}><a href={threeval.link}>{threeval.name}</a></span>
                                        ))}
                                    </div>
                                </li>
                            ))}
                        </ul>
                        <div className="brandBox">
                            <div className="brand">
                                {contentval.brand.map((brandval, brandk)=>(
                                    <a key={brandk} href={brandval.link}>
                                        <img src={brandval.img} />
                                    </a>
                                ))}
                            </div>
                            <div class="advBrand">
                                {contentval.adv && contentval.adv.map((advval, advk)=>(
                                    <a key={advk} href={advval.link}>
                                        <img src={advval.img} />
                                    </a>
                                ))}
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        )
    }
}

export default TMNavigator